<template>
	<view class='coupon_box' v-if="isShow">
		<view class="mask"></view>
		<view class="coupon_container">
			<view class="coupon_center">
				<image class="top_bg" src='../static/images/img/coupon.png'></image>
				<view class="content">
					<image class="title" src='../static/images/img/coupon_title.png'></image>
					<view class="coupon_list">
						<view class="coupon_item across" v-for="(item,index) in couponList">
							<view class="item_left vertical">
								<view class="name">{{item.coupon_name}}</view>
								<view class="time">
									{{item.start_time}}-{{item.end_time}}
								</view>
								<view class="astrict">
									{{item.explain}}
								</view>
							</view>
							<view class="item_right vertical">
								<view class="price">{{item.dec_price}}</view>
								<view v-if="item.have == 0" @click.stop="getcoupons(item.id,item.shop_id,index)" class='can'>领取</view>
								<view v-else class='noCan'>已领取</view>	
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="close" @click="close">
				<image src='../static/images/close.png'></image>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		name:"CouponToast",
		data() {
			return {
				
			};
		},
		props:[
			'couponList',
			'isShow',
			'uid'
		],
		methods:{
			close(){
				this.$emit('close')
			},
			getcoupons(coupon_id,shop_id,index){
				uni.request({
					url: 'https://dsx.cdzer.com/api/Coupon/getcoupons', //仅为示例，并非真实接口地址。
					data: {
						coupon_id,
						shop_id,
						uid:this.uid
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
							console.log(res,"领取嘛")
								if(res.status == 200){
									this.$emit('getcoupon',index)
									uni.showToast({
										title:res.data.mess,
										mask:true,
										duration:1500
									})
									
								}else{
									uni.showToast({
										title:res.data.mess,
										mask:true,
										duration:1500
									})
								}
								}
				});
			}
		}
	}
</script>

<style lang="less">
	.across{
		display: flex;
	}
	.vertical{
		display: flex;
		flex-direction: column;
	}
	.coupon_box{
		position: fixed;
		z-index: 9999;
		left: 0;
		top:0;
		.mask{
			width: 100vw;
			height: 100vh;
			background-color: rgba(0,0,0,0.6);
			z-index: 9;
		}
		.coupon_container{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.coupon_center{
			z-index: 100;
			// position: absolute;
			// left: 0;
			// top: 0;

			.top_bg{
				width: 100vw;
				height: 36vw;
				// margin-top: 120rpx;
				z-index: 99;
			}
			.content{
				
				display: flex;
				flex-direction: column;
				width: 90vw;
				margin-left: 5vw;
				margin-top: -20rpx;
				// margin: -20rpx 5vw;
				// position: absolute;
				// top: calc(36vw + 120rpx);
				// left: 5vw;
				min-height: 30vh;
				align-items: center;
				background: linear-gradient(90deg, #F65636 50%,#E03432 100%);
				border-radius: 15rpx;
				justify-content: space-around;
				.title{
					width: 40vw;
					height: 9vw;
					margin: 5rpx 0;
				}
				.coupon_list{
					width: 100%;
				}
				.coupon_item{
					width: 90%;
					margin: 20rpx 5%;
					justify-content: space-between;
					align-items: center;
					position: relative;
					height: 180rpx;
					.item_left{
						background-color: #FAF6F7;
						flex: 4;
						height: 180rpx;
						border-top-left-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
						justify-content: center;
						padding-left: 30rpx;
						position: relative;
						overflow: hidden;
						margin-right: 1px;
						.name{
							color: #000;
							font-size: 34rpx;
						}
						.time{
							margin-top:6rpx;
							color: #B5B4B4;
						}
						.astrict{
							color: #B5B4B4;
						}
						&::after{
							content:' ';
							position: absolute;
							right: -15rpx;
							top: -15rpx;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background-color: #E03432;
						}
						&::before{
							content:' ';
							position: absolute;
							right: -15rpx;
							bottom: -15rpx;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background-color: #E03432;
						}
					}
					.item_right{
						background-color: #FAF6F7;
						flex: 2;
						height: 180rpx;
						border-top-right-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
						align-items: center;
						justify-content: center;
						position: relative;
						.price{
							color: #E13632;
							font-size: 54rpx;
							position: relative;
							&::before{
								content: '¥';
								position: absolute;
								left: -27rpx;
								font-size: 40rpx;
								bottom: 5rpx;
							}
						}
						.can{
							width: 140rpx;
							text-align: center;
							background-color: #E13632;
							height: 56rpx;
							line-height: 56rpx;
							color: #fff;
							border-radius: 20rpx;
						}
						.noCan{
							width: 140rpx;
							text-align: center;
							background-color: #EEEEEE;
							height: 56rpx;
							line-height: 56rpx;
							color: #999;
							border-radius: 20rpx;
						}
						&::after{
							content:' ';
							position: absolute;
							left: -15rpx;
							top: -15rpx;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background-color: #E03432;
						}
						&::before{
							content:' ';
							position: absolute;
							left: -15rpx;
							bottom: -15rpx;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							background-color: #E03432;
						}
					}  
				
				}
			}
		}
		.close{
			// position: fixed;
			// bottom: 3vh;
			// left: calc(50vw - 30rpx);
			margin-top: 10rpx;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>
